<template>
  <div class="cart-list">
    <scroll class="content" :probe-type="3" :pull-up-load="true" ref="scroll" 
    @scroll="detailScroll" @pullingUp="loadMoer">
      <cart-list-item v-for="(item, index) in cartList" 
      :key="index" :item-info="item">
      </cart-list-item>
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll" //滚动组件
import CartListItem from './CartListItem.vue'

//导入vuex的getters 转换为计算属性 vuex提供的方法
import { mapGetters } from 'vuex'


export default {
  name: "CartList",
  components : {
    Scroll,
    CartListItem
  },
  computed: {//计算属性
    ...mapGetters(["cartList"])
  },
  //方法
  methods: {
    //子组件 滚动组件传送滚动坐标
    detailScroll(position) {

    },
    //上拉加载更多
    loadMoer() {

    }
  },
  // console.log("路由缓存进入")
  activated() {
    //刷新滚动组件高度
    //这里这样写是因为我们添加的购物车数据在vuex里面，滚动组件监听不到vuex 
    //所以高度不能刷新，需要在路由缓存进入的时候刷新一次
    this.$refs.scroll.refresh()
  }
}
</script>

<style scoped>
.content {
  height: 100%;
}
.cart-list {
  height: calc(100% - 44px - 49px - 40px);
  overflow: hidden;
}
</style>
